<template>
<div id="app">
    <el-container style="border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <template slot="title">
            <i class="el-icon-message"></i>租赁后台系统
          </template>
          <el-menu-item-group>
            <template slot="title">租赁后台系统</template>
            <el-menu-item index="1">
              <router-link to="shopManage" tag="div">店铺审核</router-link>
            </el-menu-item>
            <el-menu-item index="6">
              <router-link to="shopDrawbackManage" tag="div">店铺提现审核</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="OrderManage" tag="div">订单管理</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="ShopTypeManage" tag="div">电铺分类管理</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="GoodsManage" tag="div">商品管理</router-link>
            </el-menu-item>
            <el-menu-item index="5">
              <router-link to="Statistics" tag="div">统计</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="out">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{name}}</span>
        </el-header>

        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
    <div class="beian">
      <div>©2020 上海丰歌网络科技有限公司</div>
      <div><a href="http://beian.miit.gov.cn/" target="_blank">沪ICP备18015403号-1</a></div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      name: ''
    }
  },
  methods: {
    handleCommand (command) {
      if (command === 'out') {
        // 注销
        localStorage.removeItem('userInfo')
        this.$router.replace({
          path: '/login'
        })
      }
    },
    /**
     * 根据用户获取店铺信息
     * @param {number} id 用户id
     */
    getShopInfo (id) {
      return this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shop/detail/usr`, {
        query: {
          id
        }
      }).then(res => {
        // Vue.prototype.shopInfo = res.body.body
      })
    }
  },
  mounted () {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'))
    console.log('userInfo: ', userInfo)
    if (!userInfo) {
      this.$router.replace({
        path: '/login'
      })
      return
    }
    this.name = userInfo.nickName
    // this.getShopInfo(userInfo.id)
  }
}
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.beian {
  padding: 5px 0;
  text-align: center;
  font-size: 12px;
  color: #666666;
}
</style>
